<template>
    <div>
        <van-cell-group border>
            <van-field v-model="tel" label="手机号" placeholder="请输入手机号.." autofocus />
        </van-cell-group>

        <div class="loginbtn">
            <van-button :disabled="flag" round block type="danger" @click="next">下一步</van-button>
        </div>
    </div>
</template>

<script>
import { doCheckPhone, } from '../../api/user'
import Vue from 'vue';
import { Dialog } from 'vant';
Vue.use(Dialog)
export default {
    data() {
        return {
            tel: '',
        }
    },
    methods: {
        next() {
            // 验证你的tel是否可以注册
            doCheckPhone({ tel: this.tel }).then(res => {
                console.log(res.data);
                switch (res.data.code) {
                    case '10005':
                        Dialog.confirm({
                            message: '用户名已存在',
                        })
                            .then(() => {
                                // on confirm 确定
                                console.log("点了确定");
                                this.$router.back()
                            })
                            .catch(() => {
                                // on cancel 取消
                                console.log('点了取消');
                            });
                        break;
                    case "200":
                        localStorage.setItem('tel',this.tel)
                        this.$router.push('/register/two')
                        break;
                    default:

                }
            })
        }
    },
    computed: {
        flag() {
            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.tel)) {
                return false // 显示的红色可用
            } else {
                return true  // 灰红色 不可用
            }
        }
    }
}
</script>

<style scoped>
.loginbtn {
    width: 80%;
    margin: 20px auto;
}
</style>